﻿@using MyCompanyName.AbpZeroTemplate.Authorization
@using MyCompanyName.AbpZeroTemplate.Web.Areas.AppAreaName.Startup
@{
    ViewBag.CurrentPageName = AppAreaNamePageNames.Common.OrganizationUnits;
}
@section Styles
    {
    <link rel="stylesheet" abp-href="/view-resources/Areas/AppAreaName/Views/OrganizationUnits/Index.css" asp-append-version="true" />
}
@section Scripts
    {
    <script abp-src="/view-resources/Areas/AppAreaName/Views/OrganizationUnits/Index.js" asp-append-version="true"></script>
}

<div class="kt-subheader kt-grid__item">
    <div class="kt-subheader__main">
        <h3 class="kt-subheader__title">
            <span>@L("OrganizationUnits")</span>
        </h3>
        <span class="kt-subheader__separator kt-subheader__separator--v"></span>
        <span class="kt-subheader__desc">
            @L("OrganizationUnitsHeaderInfo")
        </span>
    </div>
</div>


<div class="kt-content">
    <div class="row">
        <div class="col-lg-6">
            <div class="kt-portlet">
                <div class="kt-portlet__head">
                    <div class="kt-portlet__head-label">
                        <h3 class="kt-portlet__head-title">
                            @L("OrganizationTree")
                        </h3>
                    </div>
                    <div class="kt-portlet__head-toolbar">
                        <div class="kt-portlet__head-actions">
                            @if (IsGranted(AppPermissions.Pages_Administration_OrganizationUnits_ManageOrganizationTree))
                            {
                                <button type="button" id="AddRootUnitButton" class="btn btn-primary">
                                    <i class="la la-plus"></i> @L("AddRootUnit")
                                </button>
                            }	
                        </div>
                    </div>
                </div>
                <div class="kt-portlet__body">
                    <div id="OrganizationUnitEditTree"></div>
                    <div id="OrganizationUnitTreeEmptyInfo" ng-if="!vm.organizationTree.unitCount" class="text-muted">
                        @L("NoOrganizationUnitDefinedYet")
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-6">
            <div class="kt-portlet">
                <div class="kt-portlet__head">
                    <div class="kt-portlet__head-label">
                        <h3 class="kt-portlet__head-title">
                            <span id="SelectedOuRightTitle"></span>
                        </h3>
                    </div>
                </div>
                <div class="kt-portlet__body">
                    <div id="SettingsTabPanel" class="tabbable-line">
                        <ul class="nav nav-tabs" role="tablist">
                            <li class="nav-item">
                                <a href="#MembersTab" aria-expanded="true" class="nav-link active" data-toggle="tab" role="tab">
                                    @L("Members")
                                </a>
                            </li>

                            <li class="nav-item">
                                <a href="#RolesTab" aria-expanded="true" class="nav-link" data-toggle="tab" role="tab">
                                    @L("Roles")
                                </a>
                            </li>
                        </ul>

                        <div class="tab-content">
                            <div class="tab-pane active" id="MembersTab">
                                @if (IsGranted(AppPermissions.Pages_Administration_OrganizationUnits_ManageMembers))
                                {
                                    <button type="button" id="AddUserToOuButton" class="btn btn-primary float-right mb-3" style="display: none">
                                        <i class="la la-plus"></i> @L("AddMember")
                                    </button>
                                }
                                <div id="OuMembersTable" style="display: none">
                                    <table class="organization-members-table display table table-striped table-bordered table-hover dt-responsive nowrap">
                                        <thead>
                                        <tr>
                                            <th>@L("Delete")</th>
                                            <th>@L("UserName")</th>
                                            <th>@L("AddedTime")</th>
                                        </tr>
                                        </thead>
                                    </table>
                                </div>

                                <div id="OuMembersEmptyInfo" class="text-muted">
                                    @L("SelectAnOrganizationUnitToSeeMembers")
                                </div>
                            </div>

                            <div class="tab-pane" id="RolesTab">
                                @if (IsGranted(AppPermissions.Pages_Administration_OrganizationUnits_ManageRoles))
                                {
                                    <button type="button" id="AddRoleToOuButton" class="btn btn-primary float-right mb-3" style="display: none">
                                        <i class="la la-plus"></i> @L("AddRole")
                                    </button>
                                }
                                <div id="OuRolesTable" style="display: none">
                                    <table class="organization-roles-table display table table-striped table-bordered table-hover dt-responsive nowrap">
                                        <thead>
                                        <tr>
                                            <th>@L("Delete")</th>
                                            <th>@L("Role")</th>
                                            <th>@L("AddedTime")</th>
                                        </tr>
                                        </thead>
                                    </table>
                                </div>

                                <div id="OuRolesEmptyInfo" class="text-muted">
                                    @L("SelectAnOrganizationUnitToSeeRoles")
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>